<template>
  <div>

    <el-row class="moveBlock">
      <el-col :span="24" class="topSearch">
        <el-radio class="radio" v-model="radio" label="1">日</el-radio>
        <el-radio class="radio" v-model="radio" label="2">月</el-radio>

        <el-date-picker
          v-model="date"
          align="right"
          :type="type()"
          :placeholder="str()"
        >
        </el-date-picker>
        <!--  <label>服务类型</label>
          <el-select v-model="queryParams.serveType" placeholder="请选择">
            <el-option v-for="service in serveTypes" :label="service.name" :value="service.code"
                       :key="service.code"></el-option>
          </el-select>-->
        <el-button type="primary" @click="onSubmit"  size="small">查询</el-button>

      </el-col>
    </el-row>
    <el-row class="moveBlock">
      <el-col :span="24">
        <div id="serverCountChart"></div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        radio: '1',
        str(){
          if (this.radio == 1) {
            return '选择日'
          } else if (this.radio == 2) {
            return '选择月'
          }
        },
        type(){
          if (this.radio == 1) {
            return 'date'
          } else if (this.radio == 2) {
            return 'month'
          }
        },
        queryParams: {
          beginDate: '',
          endDate:''
        },
        date: '',


        count(){
          let ary = []
          for (let i = 0; i < 24; i++) {
            ary.push(i)
          }
          return ary
        },
        open8() {
          this.$message({
            showClose: true,
            message: '请选择时间和服务类型',
            type: 'error'
          });
        }
      }
    },
    methods: {

      /*查询*/
      onSubmit(e){
        e.preventDefault();
        /*时间格式化*/
        function add(c) {
          if (c >= 10) {
            return c
          } else if (c < 10 && c.substr(0, 1) == 0) {
            return c
          } else {
            return '0' + c
          }
        }

        var formatDate = (a) => {
          var ary = new Date(a).toLocaleDateString().split('/');
          ary = ary.map(function (item) {
            return add(item);
          })
          return ary.join('')
        }
        if (this.radio == 1) {
          if (this.date) {
            this.queryParams.beginDate = formatDate(this.date);
            this.queryParams.endDate = formatDate(this.date);
          }
        } else if (this.radio == 2) {
          if (this.date) {
            this.queryParams.beginDate = formatDate(this.date)+'01';
            this.queryParams.endDate = formatDate(this.date)+'31';
          }
        }


        /*请求*/
        console.log('服务统计参数', this.queryParams)
        if (this.queryParams.date) {
          this.$axios.get('/api/api/serves/stastics', {params: this.queryParams}).then((data) => {
            console.log('服务统计', data)
            if (data.data) {
              console.log(data.data);

                var obj = data.data.find((item) => {
                  return item.serveType == this.queryParams.serveType
                })
                console.log('1111', obj)
                var aryData = [];
                if (obj.list.length) {
                  var ary = obj.list
                  aryData = this.count().map((item) => {
                    for (var i = 0; i < ary.length; i++) {
                      if (item == ary[i].name.substr(8, 2)) {
                        return ary[i].count
                      } else {
                        return 0
                      }
                    }

                  })
                  console.log('aryData----------', aryData)

                } else {
                  for (let i = 0; i < 24; i++) {
                    aryData.push(0)
                  }
                }
                var objData = {}
                objData.data = aryData;
                objData.type = 'line';
                objData.name = obj.serveName;
                console.log('========', objData);
                this.objData = objData;
                var legend=this.serveTypes.map((item)=>{
                    return item.name;
                })
                this.drawLine(this.count(), objData,legend);


            }


          });
        } else {
          this.open8()
        }
      },
      /*
       *折线图
       * xData x轴data
       * objData series
       * */

      drawLine(xData, objData,legend){
        var lineOption1 = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: legend,
              x: 'right'
            },

          xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#d9dcde'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: '#333'
              },
              formatter: '{value}点'
            },
            axisLine: {
              lineStyle: {
                color: '#d9dcde',
                width: 2
              }
            },
            axisTick: {
              show: false,
              alignWithLabel: false,
            },
            data: xData
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#f6f7f8'
              }
            },
            /* minInterval: 0.25,*/
            axisTick: {
              show: false,
              alignWithLabel: true,

            },
            max: 100,
            min: 0,
            interval: 10,
            axisLabel: {
              margin: 10,
              textStyle: {
                color: '#333'
              },
              /* formatter: '{value}℃'*/
            },
            axisLine: {
              lineStyle: {
                color: '#d9dcde',
                width: 2
              }

            }

          },
          /*dataZoom: [{
           type: 'inside',
           start: 1,
           end: 31
           }, ],*/
          series: objData,
          /*[
           {
           name: '请求数',
           type: 'line',
           data: [130, 26, 6, 6, 66, 62, 1]
           }, {
           name: '数',
           type: 'line',
           data: [130, 233, 4, 6, 66, 62, 1]
           }, {
           name: '数',
           type: 'line',
           data: [1, 33],
           },
           ]*/
          /* color: ['#23a7f1', '#fad733', '#7266ba']*/
          };
        var myLine1 = this.$echarts.init(document.getElementById('serverCountChart'));
        myLine1.setOption(lineOption1);
      }
    },
    beforeCreate(){

      /*服务类型*/
      this.$axios.get('/api/api/constants').then((data) => {
        if (data.data.serveTypes) {
          this.serveTypes = data.data.serveTypes;

        }
        /*if (data.data.saleStates) {
         this.saleStates = data.data.saleStates
         }*/
      })
    },
    mounted(){

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  #serverCountChart {
    height: 500px;
  }

  .moveBlock:nth-child(2) {
    margin-top: -11px;
  }
</style>
